<template>
  <div class="productsmam">
    <a-card title="产品管理">
      <a-tabs v-model="form.status" @change="callback">
        <a-tab-pane key="a" tab="全部">
        </a-tab-pane>
        <a-tab-pane key="1" tab="待审核">
        </a-tab-pane>
        <a-tab-pane key="2" tab="活动中">
        </a-tab-pane>
        <a-tab-pane key="3" tab="即将到期">
        </a-tab-pane>
        <a-tab-pane key="4" tab="已暂停">
        </a-tab-pane>
        <a-tab-pane key="5" tab="已下架">
        </a-tab-pane>
      </a-tabs>
      <div class="search_box">
        <div>
          <a-input v-model="form.search" style="width:350px" placeholder="请输入淘宝产品ID或产品名称或发布人" @keyup.enter="getGoodsSelect" />
          <!-- <a-select v-model="form.class" style="width: 120px" v-show="tabs=='1'" @change="selectchange">
            <a-select-option value="1">
              Jack
            </a-select-option>
            <a-select-option value="2">
              Lucy
            </a-select-option>
          </a-select> -->
          <a-range-picker
            :ranges="{ '今天': [moment(), moment()], '本月': [moment(), moment().endOf('month')] }"
            show-time
            format="YYYY/MM/DD HH:mm:ss"
            @change="onChangetime" />
        </div>
        <div class="btns">
          <a-button icon="vertical-align-top" type="primary" @click="goodsShelf">
            上架
          </a-button>
          <a-button icon="vertical-align-bottom" style="background-color:orange;color:white;" @click="shelfGoods">
            下架
          </a-button>
        </div>
      </div>
      <a-table
        :columns="columns"
        :row-key="record => record.id"
        :data-source="data"
        :pagination="pagination"
        :loading="loading"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        @change="handleTableChange">
        <template slot="goods_img" slot-scope="record">
          <img
            :src="record.goods_img"
            alt=""
            srcset=""
            style="width:120px;" /></template>
        <template slot="goods_title" slot-scope="record"> <a
          :href="record.goods_url"
          target="_blank"
          rel="noopener noreferrer">{{ record.goods_title }}</a></template>
        <template slot="goods_type" slot-scope="record"> <span
          style="background-color:blue;color:white;padding:2px 5px;">{{ record.goods_type }}元档</span> </template>
        <template slot="status" slot-scope="record">
          <a-tag
            :color="
              record.status == 1
                ? 'gray'
                : record.status === 2
                  ? 'cyan'
                  : record.status === 3
                    ? 'green'
                    : record.status === 4
                      ? 'orange'
                      : 'red'
            "
          >
            {{
              record.status == 1
                ? '审核中 '
                : record.status === 2
                  ? '待审核'
                  : record.status === 3
                    ? '活动中'
                    : record.status === 4
                      ? '已暂停'
                      : '已下架'
            }}
          </a-tag>
        </template>
        <template slot="coupon_num" slot-scope="record">
          <div><a :href="record.coupon_url" target="_blank" rel="noopener noreferrer">领取</a></div>
          <div> {{ record.coupon_surplus }}/{{ record.coupon_num }}</div>
        </template>
        <template slot="price" slot-scope="record"> {{ record.price }}/{{ record.after_price }}
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
  import {
    getGoodsSelect,
    goodsShelf,
    shelfGoods
  } from '@/api/goods'
  import moment from 'moment'
  export default {
    name: 'Productsmam',
    data () {
      return {
        goodsidstr: '',
        dateFormat: 'YYYY/MM/DD',
        monthFormat: 'YYYY/MM',
        tabs: '1',
        form: {
          status: 'a',
          search: '',
          start_time: '',
          end_time: ''
        },
        columns: [{
            title: 'ID',
            dataIndex: 'item_id',
            // sorter: true,
            // width: '20%',
            scopedSlots: {
              customRender: 'item_id'
            }
          },
          {
            title: '产品名称',
            // dataIndex: 'goods_title',
            // width: '20%',
            scopedSlots: {
              customRender: 'goods_title'
            }
          },
          {
            title: '推广标题',
            dataIndex: 'tg_title',
            // width: '20%',
            scopedSlots: {
              customRender: 'tg_title'
            }
          },
          {
            title: '图片',
            // dataIndex: 'goods_img',
            // width: '20%',
            scopedSlots: {
              customRender: 'goods_img'
            }
          },
          {
            title: '优惠劵剩余/优惠券总量',
            // dataIndex: 'coupon_num',
            // width: '20%',
            align: 'center',
            scopedSlots: {
              customRender: 'coupon_num'
            }
          },
          {
            title: '原价/券后价',
            // dataIndex: 'price',
            // width: '20%',
            scopedSlots: {
              customRender: 'price'
            }
          },
          {
            title: '商品类型',
            // dataIndex: 'goods_type',
            // width: '20%',
            scopedSlots: {
              customRender: 'goods_type'
            }
          },
          {
            title: '佣金率(%)',
            dataIndex: 'commission_bl',
            // width: '20%',
            scopedSlots: {
              customRender: 'commission_bl'
            }
          },
          {
            title: '状态',
            // dataIndex: 'status',
            // width: '20%',
            scopedSlots: {
              customRender: 'status'
            }
          },
          {
            title: '发布人',
            dataIndex: 'user_name',
            // width: '20%',
            scopedSlots: {
              customRender: 'user_name'
            }
          }
          // {
          //   title: '发布时间',
          //   dataIndex: 'createTime',
          //   // width: '20%',
          //   scopedSlots: {
          //     customRender: 'createTime'
          //   }
          // },
          // {
          //   title: '活动结束时间',
          //   dataIndex: 'activityEndTime',
          //   // width: '20%',
          //   scopedSlots: {
          //     customRender: 'activityEndTime'
          //   }
          // }
          // {
          //   title: '操作',
          //   // dataIndex: 'active',
          //   // width: '20%',
          //   scopedSlots: {
          //     customRender: 'active'
          //   }
          // },

        ],
        selectedRowKeys: [], // Check here to configure the default column
        data: [
        //   {
        //   id: 8, // 自增id
        //   item_id: '606540358182', // 商品id
        //   goods_title: 'Ducky吉利鸭原魔力鸭One2 机械键盘樱桃红轴电竞游戏办公电脑背光', // 商品名称
        //   goods_url: 'https://detail.m.tmall.com/item.htm?id=606540358182&ali_trackid=2:mm_40370965_22602780_74958456:', // 商品地址
        //   tg_title: '测试提交', // 推广标题
        //   goods_img: '//img.letuilm.com/2020/08/bcd6e82020082717400312420.jpeg', // 商品图
        //   coupon_url: 'https://uland.taobao.com/quan/detail?sellerId=725677994&activityId=75bc83cf8948471382a8c9604f323c0a', // 优惠卷链接
        //   coupon_num: 10000, // 优惠卷总量
        //   coupon_surplus: 10000, // 优惠卷剩余数量
        //   price: '629.00', // 原价
        //   after_price: '609.00', // 卷后价
        //   goods_type: 1, // 商品状态
        //   commission_bl: '12', // 佣金比例
        //   month_num: 283, // 月销量
        //   service: '1', // 服务费费率
        //   status: 4, // 状态 1=审核中  2待审核，3活动中，4已暂停，5已下架
        //   user_name: '陈柯帆' // 上单昵称
        // }
        ],
        pagination: {},
        loading: false
      }
    },

    computed: {

    },
    created () {
      this.getGoodsSelect()
    },
    mounted () {

    },
    methods: {
      moment,
      // 上架转下架商品
      shelfGoods () {
        console.log(this.goodsidstr)
        if (this.goodsidstr !== '') {
          shelfGoods({
            id: this.goodsidstr
        })
        .then(res => {
          if (res.code === 200) {
            this.$message.success('下架成功!')
            this.getGoodsSelect()
        } else {
          this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
        } else {
            this.$message.info('请先选择要下架的商品!')
        }
      },
      // 下架转上架商品
      goodsShelf () {
        console.log(this.goodsidstr)
        if (this.goodsidstr !== '') {
          goodsShelf({
            goods_id: this.goodsidstr
        })
        .then(res => {
          if (res.code === 200) {
            this.$message.success('上架成功!')
            this.getGoodsSelect()
        } else {
          this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
        } else {
            this.$message.info('请先选择要上架的商品!')
        }
      },

      // 管理获取商品列表
      getGoodsSelect () {
        this.loading = true
        getGoodsSelect(this.form)
          .then(res => {
            if (res.code === 200) {
              console.log('返回', res)
              this.data = res.data.data
              this.loading = false
            } else {
              this.$message.info(res.msg)
              this.loading = false
            }
          })
          .catch(err => {
            console.log(err)
          })
      },

      onSelectChange (selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys)
        this.selectedRowKeys = selectedRowKeys
        this.goodsidstr = this.selectedRowKeys.toString()
        // console.log(this.goodsidstr)
      },
      handleTableChange (pagination, filters, sorter) {
        console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          sortField: sorter.field,
          sortOrder: sorter.order,
          ...filters
        })
      },
      fetch (params = {}) {
        console.log('params:', params)
        this.loading = true
        // some axaj
      },
      onChangetime (dates, dateStrings) {
        console.log('From: ', dates[0], ', to: ', dates[1])
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
        this.form.start_time = moment(dateStrings[0]).format('X')
        this.form.end_time = moment(dateStrings[1]).format('X')
        this.getGoodsSelect()
      },
      callback () {
        console.log(this.form.status)
        this.getGoodsSelect()
      }
      // selectchange () {
      //   console.log(this.form.class)
      // }
    }
  }
</script>

<style lang='less' scoped>
  .productsmam {
    width: 100%;

    .search_box {
      display: flex;
      justify-content: space-between;
    }

    .btns {
      padding: 8px 0;
      float: right;
    }
  }
</style>
